<template>
    <div class="box">
        <!-- <div class="iframe"> -->
            <!-- <a :href="url">111</a>
            <embed src="http://niu.icrobot.cn/c5bee14962244a969ef5f69b22f9f526%E7%AC%AC%E4%B8%80%E8%8A%82%20%E8%BF%90%E8%BE%93%E8%BD%A6.pdf" type=""> -->
           <iframe class="prism-player" style="position:fixed;top:0;left:0;right:0;bottom:0" :src="pdfUrl" width="100%" height="100%"></iframe>
        <!-- </div> -->
         <!-- <pdf style="width:100%;margin-top:0.625rem" class="pdf" ref="pdf" v-for="i in numPages" :key="i" :page="i" :src="textUrl"></pdf> -->
         <!-- <div class="button">
             <button @click="meun">-</button>
             <div class="slider">
                 <van-slider v-model="value" vertical min="100" max="200" step="1" @input="onChange" />
             </div>
             <button @click="changeBig">+</button>
         </div> -->

        <!-- 水印 -->
        <p style="top:2rem;">艾克瑞特{{name}}</p>
        <p style="top:2rem;left:4rem">艾克瑞特{{name}}</p>
        <p style="top:10rem">艾克瑞特{{name}}</p>
        <p style="top:10rem;left:4rem">艾克瑞特{{name}}</p>

        <!-- 顶部齿轮 -->
        <div class="chilun">
            <van-count-down @change="timeChange" :time="time">
                <template #default="timeData">
                    <div class="img"><img src="img/chilinzi.png" alt=""><span>{{ timeData.hours }}</span></div>: 
                    <div class="img"><img src="img/chilinzi.png" alt=""><span>{{ timeData.minutes }}</span></div>: 
                    <div class="img"><img src="img/chilinzi.png" alt=""><span>{{ timeData.seconds }}</span></div>
                </template>
            </van-count-down>
        </div>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    components:{
        pdf
    },
    created() {
            let url = this.$route.query.url;
            this.url = url;
            this.id = this.$route.query.id; 
            this.pdfUrl = `pdf/web/viewer.html?file=${encodeURIComponent(url)}`
            console.log(this.src);
            // this.textUrl =pdf.createLoadingTask(url);
            // this.textUrl.promise.then(pdf => { 
            //     this.numPages = pdf.numPages;
                
            // }).then(res=>console.log('11111')); 
            (async ()=>{
                let {data} = await this.get('/course/queryClassAllotsOne',{courseId:this.id,userId:localStorage.getItem('id')});
                let datas = await this.get('/user/userInfoShow',{userId:localStorage.getItem('id')});
                 console.log(datas);
                 this.loading = false;
                 this.name = datas.data.userName;
                this.oldTime = parseInt(data.textTime);
                console.log(this.oldTime,1-data.textProgress/100);
                this.time =parseInt(this.oldTime*(1 - data.textProgress/100))*1000;
                console.log(this.time);
            })()
    },
    destroyed(){
        if(this.loading){
            return
        }
        let textProgress = ( 1 - (this.newTime / this.oldTime).toFixed(4))*100;
        console.log(textProgress);
        (async ()=>{
            let data = await this.get('/course/updateIcrobotUserClassProgress',{courseId:this.id,userId:localStorage.getItem('id'),textProgress})
        })()
    },
    data() {
        return {
            scr:'',
             currentPage: 0, // pdf文件页码
                pageCount: 0, // pdf文件总页数
            loading:true,
            name:'',
            numPages:'',
            url:'',
            pdfUrl:'',
            textUrl:'',
            scale: 100,
            id:'',
            value:100,
            newTime:0,
            time:0,
            oldTime:0,
            timeData:{
                hours:0,
                minutes:0,
                seconds:0
            }
        }
    },
    methods: {
        changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      }, 
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
        timeChange(e){
           this.newTime = this.changeTime(e.hours,e.minutes,e.seconds);
        },
        changeTime(hour,minutes,seconds){
            return (hour*60*60 + minutes*60 + seconds);
        },
        changeBig(){
            if(this.scale >= 200){
                return
            }
            this.scale += 20;
            this.value += 20;
            if(this.value > 200){
                this.value = 200
            }
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
            // this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
        },
        meun(){
            if(this.scale <= 100){
                return
            }
            this.scale -= 20;
            this.value -= 20;
            if(this.value < 100){
                this.value = 100
            }
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
        },
        onChange(value){
            // console.log(value);
             this.scale = value;
              this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
        }
    },
}
</script>
<style lang="scss" scoped>
.iframe{
    height: 100%;
    -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
    overflow-y: scroll;
    // background-color: chartreuse;
}
    .van-count-down{
        display: flex;
        align-items: center;
    }
    .box{
        height: 100%;
        width: 100%;
        overflow-x: auto;
    }
    .button{
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0.2rem;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .slider{
        height: 8rem;
        padding: 0.4rem 0;
        box-sizing: border-box;
        margin-left: 0.1rem;
        opacity: .5;
    }
    button{
        border-radius: 50%;
        width: 0.6rem;
        height: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.4rem;
        color: #999;
        border: none;
        margin-left: 0.2rem;
        background: #eee;
        opacity: .5;
    }
    p{
        position: fixed;
        transform: rotate(-45deg);
        top: 1rem;
        left: 0.4rem;
        opacity: .2;
        color: rgb(126, 125, 125);
        font-size: 0.4rem;
        // background: white;
    }
    .chilun{
        position: fixed;
        top: 0.2rem;
        right: 0.24rem;
        display: flex;
        align-items: center;
       font-size: 0.16rem;
       .img{
           position: relative;
        //    background: white;
       }
        img{
            width: 0.54rem;
            height: 0.54rem;
        }
        span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            color: white;
            // display: inline-block;
            // background: white;

        }
    }
</style>